<script setup>
import { ref} from "vue";

//定义数据对象，并用ref操作/访问
const tableData = ref([
  {
    "name": "Tom",
    "age": 20,
    "gender": 1,
    "score": 78
  },
  {
    "name": "Rose",
    "age": 18,
    "gender": 2,
    "score": 86
  },
  {
    "name": "Jerry",
    "age": 26,
    "gender": 1,
    "score": 90
  },
  {
    "name": "Tony",
    "age": 30,
    "gender": 1,
    "score": 52
  }
])
//根据索引删除对应行
const remove = function (index) {
  //删除数据
  tableData.value.splice(index, 1)
}
//查看数据
const Onprint=function (data){
  //由于data是josn对象，为了方便读取转化成字符串形式
  alert(  JSON.stringify(data)
  )
}
//修改数据
const update=function (index){
  //------------------------index为固定值默认最后一行
  alert( index)
  tableData.value.splice(index,1,upMessage.value)
  //-------------如果再把新数据放进数组里呢
  dialogVisible.value=false;
}



const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${val}`)
}

//进入页面默认为关闭状态
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

//新增数据初始对象
const newMessage=ref({
  "name": "",
  "age": undefined,
  "gender": undefined,
  "score": undefined
})
const upMessage=ref({
  "name": "",
  "age": undefined,
  "gender": undefined,
  "score": undefined
})
//添加数据
const addData=function (){
  //提交数据
  tableData.value.push(newMessage.value)
  //关闭对话框 true为保持打开 false关闭------此处是在下面对话框定义的
  dialogVisible.value=false;
}

</script>

<template>
  <!--  //表格信息-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" width="180">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="age" label="年龄" width="180"/>
    <el-table-column prop="gender" label="性别" width="180">
      <template #default="scope">
        <span v-if="scope.row.gender===1">男</span>
        <span v-if="scope.row.gender===2">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="score" label="成绩" width="180">
      <template #default="scope">
        <span v-if="scope.row.score<60" style="color: red">不及格</span>
        <span v-if="scope.row.score>=60 &&scope.row.score<=85">及格</span>
        <span v-if="scope.row.score>85">优秀</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <!--        //scope.index获取的是当前元素的索引-->
        <el-button type="danger" @click="remove(scope.$index)">删除</el-button>
        <!--        //scope.row获取的是每一行的数据-->
        <el-button type="danger" @click="Onprint(scope.row)">查看</el-button>

        <el-button  text type="success" @click="dialogVisible1 = true"> 修改</el-button>
        <el-dialog
            v-model="dialogVisible1"
            title="Tips"
            width="70%"
        >
          <!--    //表单-->
          <el-form :model="upMessage" label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="upMessage.name"/>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="upMessage.age"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="upMessage.gender"/>
            </el-form-item>
            <el-form-item label="成绩">
              <el-input v-model="upMessage.score"/>
            </el-form-item>
          </el-form>
          <!-- 对话框里面 -->
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button  type="primary" @click="update(scope.$index)" >
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>

        <!-- --------新增功能 -->
        <el-button  text type="success" @click="dialogVisible = true"> 新增</el-button>
        <el-dialog
            v-model="dialogVisible"
            title="Tips"
            width="70%"
        >
          <!--    //表单-->
          <el-form :model="newMessage" label-width="120px">
            <el-form-item label="姓名">
              <el-input v-model="newMessage.name"/>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="newMessage.age"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="newMessage.gender"/>
            </el-form-item>
            <el-form-item label="成绩">
              <el-input v-model="newMessage.score"/>
            </el-form-item>
          </el-form>
          <!-- 对话框里面 -->
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button  type="primary" @click="addData()" >
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>

      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<style scoped>

</style>